<template>
  <div :style="{height:height+'px','overflow-y':'scroll'}">
    <!-- 头部导航栏 -->
    <div class="tabbox" ref="tabbar">
      <div class="tab1">
        <img
          src="https://m.mi.com/static/img/icon-header-logo3.ddf2a1c313.png"
          class="tablog"
        />
        <div class="searchbox">
          <p class="iconfont icon-sousuo"></p>
          <p class="searchtext">搜索商品名称</p>
        </div>
        <p class="iconfont icon-wode" @click="gotoCenter"></p>
      </div>
      <div class="tab2">
        <div class="iconfont icon-xiangxia"></div>
        <div class="linkbox">
          <div class="abox">
            <router-link class="linkto" to="/Recommend/Home">推荐</router-link>
          </div>
          <div class="abox">
            <router-link class="linkto" to="/Recommend/Smart">智能</router-link>
          </div>
          <div class="abox">
            <router-link class="linkto" to="/Recommend/TV">电视</router-link>
          </div>
          <div class="abox">
            <router-link class="linkto" to="/Recommend/HomeAppliances"
              >家电</router-link
            >
          </div>
          <div class="abox">
            <router-link class="linkto" to="/Recommend/Notebook"
              >笔记本</router-link
            >
          </div>
        </div>
      </div>
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/831de258b72b38b8d586b387c2f54b16.png" class="newuser">
    </div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search } from 'vant'

Vue.use(Search)
export default {
  setup () {},
  data () {
    return {
      height: 0
    }
  },
  methods: {
    gotoCenter () {
      this.$router.push('/Center')
    }
  },
  mounted () {
    this.height = window.innerHeight - 47
  }
}
</script>

<style lang="less" scoped>
.tabbox {
  width: 100%;
  background-color: #f2f2f2;
  position: sticky;
  top: 0;
  z-index: 99;
  .tab1 {
    padding: .3125rem 0.8125rem;
    display: flex;
    align-items: center;
    .tablog {
      width: 1.6575rem;
      height: 1.6575rem;
    }
    .searchbox {
      width: 16.875rem;
      height: 1.9375rem;
      background-color: #fff;
      margin-left: 0.75rem;
      border: 1px solid #e5e5e5;
      display: flex;
      align-items: center;
      color: rgba(0, 0, 0, 0.3);
      .icon-sousuo {
        padding: 0 0.625rem;
      }
    }
    .icon-wode {
      font-size: 1.25rem;
      margin-left: 0.9375rem;
      color: #858585;
    }
  }
  .tab2 {
    position: relative;
    .icon-xiangxia {
      position: absolute;
      top: .4375rem;
      right: .625rem;
      font-size: 1rem;
      color: #999999;
    }
    .linkbox {
      .abox {
        padding: 0 0.8125rem;
        line-height: 1.7813rem;
        display: inline-block;
      }
      .linkto {
        // padding: 0 0.8125rem;
        line-height: 1.7813rem;
        display: inline-block;
        font-size: 0.845rem;
        color: #747474;
        border-bottom: 2px solid transparent;
      }
      .abox:nth-child(1) {
        margin-left: 1.875rem;
      }
      .router-link-active {
        color: #ff6700;
        border-color: #ff6700;
      }
    }
  }
}
.newuser {
  position: fixed;
  bottom: 3.4375rem;
  width: 8.5625rem;
  left: 50%;
  transform: translateX(-50%);
}
</style>
